<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07事件监听</title>
</head>
<body>
<button onclick="alert('点了')">1</button>
<button id="btn">2</button>
<h4 id="aaa">呃呃呃</h4>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eligendi ex exercitationem fuga hic id, impedit
    iure numquam optio porro, provident quibusdam rerum saepe sint, sit sunt ut vel veniam!
</div>
<div>Ab culpa, dolorem doloribus eaque enim explicabo impedit in obcaecati officiis, provident quae quia rem repellendus
    sapiente, sequi sint soluta totam veniam voluptate voluptatem. Distinctio excepturi nobis porro repellendus
    veritatis.
</div>
<div>Amet culpa deserunt distinctio doloribus esse illo impedit molestiae molestias nostrum odio perferendis provident
    quidem quisquam quos recusandae repellendus sit suscipit, veritatis. Asperiores earum eius harum placeat quibusdam
    reiciendis tenetur?
</div>
<div>Dolor esse explicabo fugit ipsum maxime molestias nihil tempore voluptates voluptatum. A autem cupiditate delectus
    eius ex, illo illum iste minima nam optio reiciendis repellat saepe. Dolore iure odio veniam?
</div>
<div>Ab consequuntur deleniti eligendi expedita explicabo labore magni molestias, necessitatibus odit officiis
    perspiciatis quasi quos? At, autem dignissimos ducimus eum harum iusto mollitia nisi nobis similique veniam. Cum,
    earum neque?
</div>
<div>A ab accusamus accusantium aperiam atque consectetur cupiditate enim eos, ex harum hic itaque molestias nemo
    numquam omnis optio placeat possimus quae quaerat quia ratione rem sapiente tempore unde veniam.
</div>
<div>Consectetur facilis iusto molestias nobis perspiciatis quasi quidem voluptates. Amet atque blanditiis, delectus
    doloremque eligendi exercitationem fuga id ipsum iure laborum molestiae nisi nulla odio quae ratione repellat sequi
    totam?
</div>
<div>Accusantium blanditiis, et explicabo fuga labore maxime nostrum provident quaerat quidem repellat suscipit
    voluptatem? Debitis earum eos eum neque! At blanditiis dignissimos eaque excepturi nesciunt perferendis quaerat quas
    temporibus. Obcaecati.
</div>
<div>Architecto autem deleniti deserunt dolore doloremque doloribus ea error esse eveniet fuga in ipsum laborum modi
    nesciunt pariatur placeat quibusdam sunt unde voluptatibus, voluptatum. Ducimus eos maxime minima possimus ut?
</div>
<div>Architecto, assumenda commodi corporis cum, debitis ducimus facere fugit itaque laboriosam natus odio quam sit
    soluta tempora voluptates? Accusantium deserunt eaque enim facere, iste voluptate! Alias earum magnam ut velit.
</div>
<div>A ab accusantium, ad aliquam aut, cum cupiditate deserunt error esse et eveniet facilis fuga libero natus, numquam
    officia perferendis perspiciatis quas quisquam recusandae rerum sit vitae! Aut, minima, quidem?
</div>
<div>Adipisci assumenda delectus distinctio magni officiis quaerat recusandae tempore? Adipisci architecto aspernatur
    facilis in nesciunt nihil nostrum odio praesentium, rerum ullam? Accusantium beatae excepturi exercitationem magni
    quisquam quos ratione, reiciendis!
</div>
<div>Amet est natus non tenetur? Aliquam eos illum itaque nemo ut. Architecto, beatae, consectetur ducimus explicabo
    fugit in ipsa maxime molestias natus neque nesciunt porro quasi quidem temporibus vero voluptatibus.
</div>
<div>Ad, adipisci aperiam autem corporis deserunt dicta dolores error esse facilis harum illo ipsa iusto laborum minima
    molestias natus nihil perferendis, quisquam quod recusandae repudiandae rerum sint sunt vel voluptatibus.
</div>
<div>Accusantium, assumenda, consectetur doloribus ducimus eveniet exercitationem expedita fuga illum ipsa iure iusto
    labore libero numquam odio perferendis quo soluta suscipit temporibus totam voluptatum. Eaque magni nesciunt nulla
    velit vero!
</div>
<div>Asperiores atque cumque enim ipsa iste laudantium magni maxime, minus necessitatibus nemo nulla, quaerat quisquam
    quos rem sapiente soluta tenetur veritatis voluptates? Deleniti dolorem eaque harum libero neque repellendus
    suscipit.
</div>
<div>Aliquam, dolores enim est eveniet quaerat quibusdam sunt totam veritatis voluptatum. Aperiam, architecto corporis
    cum ea eum impedit inventore labore laborum laudantium modi, nisi officia repellat repellendus veritatis voluptate
    voluptates.
</div>
<div>Adipisci, incidunt, neque? Dolorum, ducimus est hic omnis quas similique? Aut beatae consequatur debitis enim,
    exercitationem illum, ipsam laudantium mollitia praesentium rerum sequi sunt voluptatum! Animi beatae exercitationem
    sapiente ullam.
</div>
<div>Ad aspernatur consectetur cupiditate dicta distinctio error, est ex excepturi facilis illo illum incidunt iure
    labore molestiae nam nemo non numquam qui ratione saepe sapiente sed sequi tempora, tempore unde.
</div>
<div>Aliquam animi assumenda atque commodi corporis cum cumque deleniti deserunt dolorem doloribus facilis ipsa ipsum
    itaque laudantium necessitatibus, nobis numquam odio quos ratione repellendus saepe sequi similique, sunt suscipit
    tempora!
</div>
<div>Accusamus alias architecto deleniti distinctio enim fugit illum iste labore laudantium molestiae, officia, placeat
    quae ratione sint voluptatem. Accusamus cumque illo iste praesentium? Beatae blanditiis minus neque ratione velit,
    vero!
</div>
<div>A ad architecto aspernatur dicta dolorem doloremque eius eligendi est fugit ipsa nemo neque nisi nostrum odio odit
    placeat porro praesentium, provident quis ratione repudiandae sed, similique sunt voluptas voluptates?
</div>
<div>Ad enim harum rem sint voluptates! Adipisci blanditiis cumque debitis deleniti distinctio eveniet facere iste
    laboriosam magnam minus nemo, nisi provident quaerat quasi qui quidem quisquam sapiente sed totam velit!
</div>
<div>Ad asperiores aut ducimus earum expedita facilis fugiat hic illum impedit in ipsa, molestiae molestias nobis odio
    perferendis quod saepe sit velit vitae voluptatem. Dolores iure odio sequi voluptate voluptatum.
</div>
<div>Aliquam animi cumque deserunt, distinctio dolore enim eveniet, explicabo fuga illo illum iure minus mollitia natus
    nemo nobis perferendis quae quas quos similique velit! Corporis fugiat illo necessitatibus tempora totam.
</div>
<div>Architecto, dicta ea eligendi excepturi, ipsa itaque laboriosam laborum magnam odio officiis perferendis provident
    quis sed sint totam. Assumenda consequuntur debitis dignissimos fuga harum quam quos suscipit vero voluptate
    voluptatem.
</div>
<div>A, adipisci aliquid at aut autem dicta dolores ducimus eos esse explicabo id incidunt laudantium minima, molestiae
    nam nihil numquam odio officia reiciendis, repellat sit soluta ullam ut voluptas voluptatem!
</div>
<div>Aspernatur beatae cum cupiditate esse illo recusandae. Culpa dolore ipsa iste nesciunt voluptate. Ad, eum, tempore?
    Alias corporis debitis esse, eveniet facere fugiat iusto, mollitia officia quas sunt, totam voluptatibus!
</div>
<div>Accusantium alias amet deleniti, deserunt dolore earum, et facere natus placeat repellat tenetur, veritatis
    voluptatem voluptates? Animi atque deserunt facilis harum id inventore magnam necessitatibus odit ratione, sapiente
    totam voluptas.
</div>
<div>Accusamus accusantium aut beatae commodi delectus dignissimos, expedita hic impedit ipsam nemo non placeat quae
    quaerat quibusdam quis quo rem saepe similique sint sit. Cum dolor illo ipsam neque veritatis.
</div>
<div>Accusantium dolores eum harum laboriosam odio quo quod ullam! Ad asperiores consequatur deserunt ex impedit ipsa,
    laboriosam magni minima necessitatibus neque nesciunt numquam odio vitae. Consequuntur itaque numquam quae ullam.
</div>
<div>Atque, reiciendis, voluptate? Adipisci cum dolor incidunt laboriosam obcaecati odit perspiciatis provident
    repellendus reprehenderit velit. Amet blanditiis cum et excepturi expedita illo illum ipsam, laudantium porro,
    repudiandae, sint ut voluptates.
</div>
<div>Ab accusamus assumenda atque consectetur consequatur deserunt, ea earum et eum expedita impedit incidunt itaque
    labore magnam molestiae nam natus nemo nesciunt nisi nostrum officia optio quia ullam voluptatem voluptates.
</div>
<div>Aliquam deserunt dolorum expedita illum minus molestiae porro repellendus sunt. Deserunt dolor fugit unde
    voluptatem. Aliquam repudiandae, veniam? Alias aliquam amet beatae consectetur ea eius, maiores nostrum quod
    temporibus ut!
</div>
<div>A accusamus accusantium animi asperiores atque consequuntur dolorem doloribus eius eligendi eos facere illum iste
    laborum magnam, natus odit quae quas recusandae sunt unde velit veritatis voluptate? Accusamus, sed, voluptatem.
</div>
<div>A alias aspernatur blanditiis delectus deserunt eius eos, eveniet facilis nesciunt odio placeat quam quas tempore
    vero voluptas! Aspernatur autem dolor eius ex expedita iste itaque nostrum, saepe tempore totam.
</div>
<div>A deleniti dicta facilis fuga hic magnam maiores porro praesentium! Architecto, asperiores aut dolore ea maiores
    nemo ratione voluptate! Distinctio esse id nihil quisquam, totam voluptas! Dignissimos earum non quos.
</div>
<div>Aperiam assumenda eligendi ex, iste sequi similique suscipit temporibus! Asperiores assumenda aut dignissimos
    doloribus error, ex nam porro recusandae sint voluptate. Earum minima nesciunt odit pariatur porro saepe ullam
    voluptates.
</div>
<div>Accusantium animi beatae consectetur consequuntur cumque ducimus esse et fugit id itaque iure libero magnam,
    mollitia, non nulla numquam officiis possimus praesentium quidem quis sed sint ut vel veniam voluptates.
</div>
<div>Aliquid delectus earum eius molestiae odit possimus sint. Aliquid corporis culpa cumque deserunt distinctio dolor
    earum et minima, modi non nulla numquam perspiciatis reprehenderit rerum saepe sint veritatis. Architecto, dolores?
</div>
<div>Beatae blanditiis corporis excepturi provident, quam temporibus veritatis vero? At dolores eum ipsa iure
    perspiciatis. Ducimus hic porro recusandae. Corporis dolorem, doloremque eligendi fugit iusto nam placeat rem
    suscipit unde.
</div>
<div>Distinctio doloremque eos ipsa ipsum odio rerum saepe ullam veniam. Accusantium asperiores commodi consequuntur
    debitis deleniti dolor explicabo illo, in quas repellat, repellendus repudiandae! Autem ex incidunt quis sapiente
    totam.
</div>
<div>Eligendi exercitationem laboriosam quae quasi repudiandae veniam! A alias, debitis dolore eius eos in, laudantium
    libero porro praesentium quod soluta tempora? Animi atque debitis ea eum laboriosam quaerat quasi sunt?
</div>
<div>Accusantium alias autem deserunt, dolore, error eum expedita fugiat impedit libero maiores minus molestiae mollitia
    non pariatur perferendis provident quam quidem quis quod quos rem rerum sequi temporibus unde veritatis.
</div>
<div>Autem, dolores eaque est excepturi illum labore libero molestias, nemo optio, praesentium reiciendis sunt! Atque
    delectus facere inventore iure labore nesciunt provident quaerat suscipit, voluptate. Corporis dignissimos eum harum
    voluptate.
</div>
<div>Ab aliquid amet, consequatur dolore ea enim expedita id illum in inventore itaque magnam molestiae mollitia nisi
    omnis quo quod ratione recusandae sint, soluta suscipit tempore temporibus vel, velit voluptas?
</div>
<div>Autem consectetur consequuntur, dolore ducimus ex ipsa iste molestias nostrum odio. Beatae, delectus doloremque
    illo ipsam iste nisi qui sint unde. Cum dolor doloremque nam nisi nobis saepe, sapiente voluptatibus!
</div>
<div>Asperiores autem deserunt dolor doloremque dolorum, facere fugit iste officia pariatur quam quas repellendus sint
    soluta suscipit tempore veniam voluptatem! Aperiam aut, doloribus error nulla perspiciatis porro quidem repellendus
    voluptates!
</div>
<div>Ab adipisci at cupiditate deleniti dolore dolorem eos eum facere itaque labore libero magni minima molestiae,
    mollitia non omnis optio qui, quibusdam recusandae reiciendis saepe sequi sint soluta tempora velit.
</div>
<div>Corporis dignissimos doloribus mollitia nisi, repellendus unde vero? Accusamus accusantium adipisci aliquid
    deserunt eius eum explicabo facilis fuga incidunt inventore mollitia, necessitatibus porro provident quasi quia
    vitae voluptatum? Explicabo, quos!
</div>
<div>Ab aspernatur assumenda culpa deleniti, eaque earum expedita facilis in ipsum itaque libero minima nam natus nemo
    nisi nobis odit optio perferendis quae quibusdam quisquam reiciendis soluta tempore vel veritatis!
</div>
<div>Consequuntur culpa delectus, excepturi fugiat hic ipsam laborum laudantium minima natus nesciunt nihil omnis
    perferendis, quibusdam quo repellendus saepe, sed sunt tempore vero voluptas? Architecto consequatur dolorem iusto
    mollitia ut?
</div>
<div>Autem beatae commodi et iusto nulla quaerat quas quidem ut vel? Aspernatur atque deserunt ducimus eos
    exercitationem expedita modi nostrum obcaecati, quibusdam voluptatem? Fugit hic magnam quod sed ullam! Alias?
</div>
<div>Aliquid dicta eligendi similique tempora totam? Dolore mollitia nobis numquam repellendus tenetur. Alias animi
    commodi ducimus ea esse eum expedita facilis iste maxime, modi nemo quae reiciendis tempora tenetur, veritatis.
</div>
<div>Ipsum nam quidem quod sapiente vitae! Accusantium ad aliquam assumenda at aut, autem consequatur debitis dolore
    doloremque ducimus esse eveniet fuga, illo iure libero pariatur perferendis placeat sit voluptas voluptatum?
</div>
<div>A aspernatur assumenda beatae deserunt, dolor, dolorem, doloribus dolorum ea eligendi error fuga fugiat illum ipsam
    maxime minus nam numquam obcaecati officiis omnis pariatur porro reiciendis sapiente sunt totam ut.
</div>
<div>Animi architecto cum doloremque fuga, ipsum iure nam nisi non, odio possimus provident quae temporibus!
    Consequuntur eaque est eum in nulla ut velit voluptatum? Consectetur illo laboriosam laudantium voluptatem
    voluptatibus.
</div>
<div>Atque eius eligendi ipsum iste laudantium molestiae natus officiis quaerat repudiandae, voluptatem? Aperiam
    assumenda, atque culpa dolore dolorem ex ipsam, laboriosam nisi nobis odit perspiciatis quas quidem quis sapiente
    voluptas?
</div>
<div>A ad illum impedit, laborum maxime natus necessitatibus nulla obcaecati quas quos ullam veniam, veritatis!
    Accusamus, amet beatae blanditiis commodi dolorem dolorum, facere inventore ipsa minima quaerat quidem quis sint!
</div>
<div>Aliquam asperiores aut autem consectetur deleniti, dicta error harum illum ipsum labore laboriosam, maiores
    officiis perferendis possimus suscipit. Aliquam dicta explicabo officia tempore voluptatum! Accusantium delectus
    deleniti ea eius explicabo!
</div>

<script>
    let element = document.querySelector('#btn');
    element.addEventListener('click',function (){
        alert('点了点了');
    });
    //监听键盘按钮
    let element1 = document.querySelector('body');
    element1.addEventListener('keydown',function (){
        console.log('移动');
    });

    //监听窗口大小变更
    window.addEventListener('resize',function (){
        console.log('充值了');
    });



    //scroll 监听页面滚动
    window.addEventListener('scroll',function (){
        alert('滚了');
    });

</script>

</body>
</html>